<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>悬赏答疑</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="public/lib/layer/css/layui.css">
    <link rel="stylesheet" href="public/css/public.css">
    <link rel="stylesheet" href="public/css/reward-detail.css">
</head>

<body>
    <div class="header">
        <div class="nav-contact">
            <div class="row">
                <ul class="address"></ul>
                <div class="logo">
                	<a href="index.html">
                		<img src="public/images/sdk_logo.jpg" alt="">
                	</a>
                </div>
            </div>
        </div>
        <div class="row nav-menu">
            <div class="inline-block menu"></div>
            <div class="inline-block tool-side">
                <!-- <input class="search-bar hide" type="text"><span class="inline-block search-btn"></span> -->
            </div>
        </div>
    </div>
    <div class="contact-body">
        <div class="reward-detail-content">
            <div class="row">
                <div class="reward-detail" id="J_my_reward">
                </div>
                <div class="reward-reply-body" id="J_reward_reply">
                </div>
            </div>
        </div>
        <div class="all-reward">
            <div class="row">
                <h3 class="all-reward-title">所有竞赏</h3>
                <ul class="all-reward-list" id="J_reward_list"></ul>
            </div>
        </div>
        <div class="appointment"> </div>
    </div>
    <!-- 页脚 -->
    <div class="footer"></div>
    <div class="layui-upload-drag" id="uploadFiles" style="display: none">
      <i class="layui-icon"></i>
      <p>点击上传竞赏文稿</p>
    </div>
    <script id="J_reward_list_tpl" type="text/html">
    {{# d.forEach(function(val,index){ }}
        <li>
            <img src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.createUserId}}.png" alt="" class="teacher-icon avator">
            <p class="tac">{{val.aliasName?val.aliasName:val.name}}</p>
            <div class="ups {{# if(G.getCookie('sdk_user_type')==='TEACHER'){ }} t-set-up {{# }; }}" data-id="{{val.rewardPKId}}">点赞数:<span class="ups-num">{{val.thumbUpNumber}}</span></div>
            {{# if(val.win){ }} 
                <div class="show-reward is-win">已打赏</div> 
            {{# }else{ }}
                <div class="show-reward"><a class="finish" href="javascript:void(0);" id="setFinish" data-rewardid="{{val.rewardId}}" data-rewardpkid="{{val.rewardPKId}}">确认打赏</a></div>
            {{# }; }}
            <div class="show-reward"><a href="{{G.uploadurl+val.content}}" download="download">下载查看</a></div>
        </li>
    {{# }); }}
    </script>
    <script id="J_my_reward_tpl" type="text/html">
        <h2 class="reward-title">{{d.title}}</h2>
        <div class="user-rewarder">
            <span class="reward-user">{{d.createUser.username}}</span>
            <span class="reward-time">发布时间 ● {{new Date(d.createTime).format('YYYY-MM-DD HH:ii:ss')}}</span> {{# if(G.getCookie('sdk_user_type') === 'USER' && !d.finish){ }}
            <input type="button" value="追加描述" class="add-describe" data-id="{{d.rewardId}}"> {{# }; }}
        </div>
        <div class="user-reward-describe">
            <p class="reward-describe">{{d.content}}</p>
            <div class="inline-block tac">
                <p class="reward-money">悬赏金币：<span>{{d.amountPay}}</span></p>
                {{# if(G.getCookie('sdk_user_type') === 'TEACHER'){ }}
                    {{# if(d.finish){ }}
                        <input type="button" value="悬赏完成" class="join-reward" data-id="{{d.rewardId}}" disabled="disabled">
                    {{# } else { }}
                        <input type="button" value="参与竞赏" class="join-reward" data-id="{{d.rewardId}}">
                    {{# }; }}
                {{# }; }}
            </div>
        </div>
        <div class="append-describe"></div>
    </script>
    <script id="J_reward_reply_tpl" type="text/html">
        <ul class="reward-reply-list" id="J_reply_list">
            {{# d.list.forEach(function(val,index){ }}
            <li>
                <div class="reply-info">
                    <img src="{{G.defaultAvator}}" data-lazyload-img="{{G.uploadurl}}/avator/{{val.createUserId}}.png" alt="" class="reply-thumb avator">
                    <span class="replyer">{{val.createUserName}}</span>
                    <span class="reply-time">{{new Date(val.createTime).format('YYYY-MM-DD HH:ii:ss')}}</span>
                    <div class="reply-to" data-id="{{val.rewardCommentId}}">回复</div>
                </div>
                <p class="reply-context">{{# if(val.replyUserName){ }}回复{{val.replyUserName}}:{{# }; }} {{val.commentContent}}</p>
            </li>
            {{# }); }}
        </ul>
        {{# if(d.list.length){ }}
        <div class="pagination" id="J_pagination"></div>
        {{# }; }}
        {{# if(G.getCookie('sdk_user_type') === 'TEACHER'){ }}
        <div class="reward-reply">
            <input type="text" class="reward-reply-content" id="J_reply_content" placeholder="发表您的评论">
            <input type="button" class="reward-reply-send-btn" id="J_send_reply" value="评论">
        </div>
        {{# };}}
    </script>
    <script id="J_pagination_tpl" type="text/html">
        {{# if(d.count > d.pageSize){ }}
            <span class="switch-btn pre-btn" data-btn="pre">上一页</span> 
            <span class="pages" id="J_pages">
            {{# for(var i = 1; i < d.count/d.pageSize + 1; i++){ }}
                <span class="page {{# if(i == 1 ){ }}current-page{{# }; }}" data-page="{{i}}">{{i}}</span>
            {{# }; }}
            </span>
            <span class="switch-btn next-btn" data-btn="next">下一页</span>
        {{# }; }}
    </script>
    <script src="public/lib/layer/layui.all.js"></script>
    <script src="public/js/G.js"></script>
    <script src="public/js/user.js"></script>
    <script src="public/js/reward.js"></script>
    <script src="public/js/rewardComment.js"></script>
    <script src="public/js/public.js"></script>
    <script>
    var rewardId = G.getCookie('rewardId');
    var type = G.getCookie('sdk_user_type');
    var userId = G.getCookie('localUserId');
    var rewardParams = {
        rewardId: rewardId
    }
    if(!userId){
        layer.msg('无效的用户信息');
        setTimeout(function(){
            history.back();
        },1500)
    }
    if(!rewardId){
        layer.msg('无效的悬赏ID');
        setTimeout(function(){
            history.back();
        },1500)
    }
    //获取用户的悬赏详情    
    function getUserRewardDetail(params) {
        reward.getMyReward(params, function(data) {
            laytpl($('#J_my_reward_tpl').html()).render(data.list[0], function(html) {
                $('#J_my_reward').html(html)
            })
        })
    }

    //老师获取悬赏详情
    function getTeacherRewardDetail(params) {
        reward.getList(params, function(data) {
            laytpl($('#J_my_reward_tpl').html()).render(data.list[0], function(html) {
                $('#J_my_reward').html(html)
            })
        })
    }

    function getRewardDetail(type) {
        switch (type) {
            case 'USER':
                getUserRewardDetail(rewardParams)
                break;
            case 'TEACHER':
                getTeacherRewardDetail(rewardParams)
                break;
        }
    }
    getRewardDetail(type)

    var rewardReplyParams = {
        count: 0,
        pageId: 1,
        pageSize: 5
    }

    //获取悬赏评论列表
    function getRewardReplyListById(id, params) {
        rewardComment.getListById(id, params, function(data) {
            rewardReplyParams.count = data.count;
            console.log(data)
            laytpl($('#J_reward_reply_tpl').html()).render(data, function(html) {
                $('#J_reward_reply').html(html)
                // $('.current-page').removeClass('current-page');
                // $('.page[data-page="'+rewardReplyParams.pageId+'"]').addClass('current-page');
                lazyload()
            })
            getReplenishmentList(rewardId)
            renderPagination(rewardReplyParams)
        })
    }
    getRewardReplyListById(rewardId, rewardReplyParams)

    //获取追加描述列表
    function getReplenishmentList(rewardId){
        rewardComment.getReplenishmentList(rewardId,{},function(data){
            var html = '';
            data.list.forEach(function(val,index){
                html += '<p>追加描述：' + val.content + '</p>';
            })
            $('.append-describe').append(html)
        })
    }

    function renderPagination(data){
        laytpl($('#J_pagination_tpl').html()).render(data, function(html) {
            $('#J_pagination').html(html)
            $('.current-page').removeClass('current-page');
            $('.page[data-page="'+data.pageId+'"]').addClass('current-page');
        })
    }

    //分页
    $(document).on('click','.page',function(){
        var type = $(this).data('type');
        if(!$(this).hasClass('current-page')){
            rewardReplyParams.pageId = $(this).data('page');
            getRewardReplyListById(rewardId,rewardReplyParams)
        }
    })

    //上一页下一页切换
    $(document).on('click','.switch-btn',function(){
        var btn = $(this).data('btn');
        var pageId = parseInt($(this).siblings('.pages').find('.current-page').data('page'));
        switch (btn) {
            case 'pre':
                if(pageId > 1){
                    rewardReplyParams.pageId = pageId - 1;
                    getRewardReplyListById(rewardId,rewardReplyParams)
                }
                break;
            case 'next':
                if(pageId < Math.ceil(rewardReplyParams.count/rewardReplyParams.pageSize)){
                    rewardReplyParams.pageId = pageId + 1
                    getRewardReplyListById(rewardId,rewardReplyParams)
                }
                break;
        }
    })

    //老师回复老师的评论
    $(document).on('click', '.reply-to', function() {
        var rewardCommentId = $(this).data('id');
        layer.prompt({
            formType: 2,
            title: '评论内容',
            scrollbar: false,
            shadeClose: true,
        }, function(value, index, elem) {
            var replyParams = {
                commentContent: value,
                replyRewardCommentId: rewardCommentId
            }
            addRewardReply(rewardId, replyParams)
        });
    })

    //追加描述
    $(document).on('click','.add-describe',function(){
        var rewardId = $(this).data('id');
        layer.prompt({
            formType: 2,
            title: '追加描述',
            scrollbar: false,
            shadeClose: true,
        }, function(value, index, elem) {
            var replyParams = {
                content: value,
                rewardReplenishmentId: 0,
                rewardId: rewardId
            }
            rewardComment.replenishment(rewardId, JSON.stringify(replyParams),function(data){
                console.log(data)
                $('.append-describe').append('<p>追加描述：'+data.content+'</p>')
                layer.closeAll();
            },function(err){
                console.error(err)
            })
        });
    })

    //添加评论的dom封装
    function renderReplyDom(data,rewardReplyParams){
        var str = ' <li>'+
            '<div class="reply-info">'+
            '<img src="public/images/sdk_user_icon.png" data-lazyload-img="'+G.uploadurl + data.createUserId+'" alt="" class="reply-thumb">'+
                '<span class="replyer">'+data.createUserName+'</span>'+
                '<span class="reply-time">'+new Date(data.createTime).format("YYYY-MM-DD HH:ii:ss")+'</span>'+
                '<div class="reply-to" data-id="'+data.rewardCommentId+'">回复</div>'+
            '</div>'+
            '<p class="reply-context">'+(data.replyUserName ? '回复'+data.replyUserName+':' : '')+data.commentContent+'</p>'+
        '</li>'
        rewardReplyParams.count += 1;
        if(rewardReplyParams.pageId === Math.ceil(rewardReplyParams.count / rewardReplyParams.pageSize)){
            $('#J_reply_list').append($(str))
        }else{
            if((rewardReplyParams.count - 1) % rewardReplyParams.pageSize === 0){
                var pageId = Math.ceil(rewardReplyParams.count / rewardReplyParams.pageSize)
                renderPagination(rewardReplyParams)
            }
        }
        layer.msg('评论成功')
        $('#J_reply_content').val('')
    }

    //添加评论
    function addRewardReply(rewardId, params) {
        rewardComment.add(rewardId, JSON.stringify(params),function(data){
            renderReplyDom(data,rewardReplyParams)
        })
    }

    //老师直接进行评论
    $(document).on('click','#J_send_reply',function(){
        var replyContent = $('#J_reply_content').val();
        var replyParams = {
            commentContent: replyContent
        }
        if(!replyContent){
            return;
        }
        addRewardReply(rewardId, replyParams)
    })


    //老师参赏
    $(document).on('click','.join-reward',function(){
        layer.open({
            area: ['300px', 'auto'],
            title: false,
            closeBtn: 0,
            shadeClose: true,
            type: 1,
            scrollbar: false,
            content: $('#uploadFiles')
        })
    })
    upload.render({
        elem: '#uploadFiles',
        url: G.apiurl + 'commons/upload/rewardPK',
        accept: 'file',
        done: function(res){
          //上传完毕回调
            layer.closeAll();
            if(res.status){
                console.log(res)
                reward.joinPK(rewardId,{rewardId:rewardId,content: res.data.originalUrl},function(data){
                    console.log(data)
                    layer.msg('竞赏成功')
                    setTimeout(function(){
                        location.reload()
                    },1500)
                })
            }else{
                layer.msg(res.message)
            }
        }
    });

    //获取参赏文稿列表
    function getRewardPKList(rewardId){
        reward.getPK(rewardId,{},function(data){
            console.log(data)
            laytpl($('#J_reward_list_tpl').html()).render(data.list, function(html) {
                $('#J_reward_list').html(html)
            })
            lazyload()
        })
    }
    getRewardPKList(rewardId)

    //点赞
    $(document).on('click','.t-set-up',function(){
        var userType = G.getCookie('sdk_user_type');
        if(userType === 'USER'){
            layer.msg('您无法点赞');
            return;
        }
        var id = $(this).data('id');
        reward.setUps(id,JSON.stringify({rewardPKId: id}),function(data){
            if(data){
                layer.msg('点赞成功')
            }else{
                layer.msg('请勿重复点赞')
            }
        })
    })

    //设置为最佳
    $(document).on('click','#setFinish',function(){
        console.log($('#setFinish'))
        var rewardId = $(this).data('rewardid');
        var rewardPKId = $(this).data('rewardpkid');
        console.log(rewardId,rewardPKId)
        reward.finish(rewardId,rewardPKId,{},function(data){
            console.log(data)
            layer.msg('打赏成功，悬赏完成')
            setTimeout(function(){
                location.reload()
            },1500)
        })
    })
    </script>
</body>

</html>